import React, { Component } from 'react';

export default class User extends Component {
    constructor(props) {
        super(props);
        // 将dom元素赋值在 this 上
        this.myTextInput = React.createRef();
        this.testRef = React.createRef();
        // 将 handleClick 事件绑定到 this 上，并重新命名
        this.click = this.handleClick.bind(this);
    }

    handleClick() {
        // 输入框赋值
        this.myTextInput.current.value = '123';
        console.log(this.testRef.current.className);
        console.log('111');
        // 输入框触发得焦事件
        this.myTextInput.current.focus();
    }

    render() {
        return (
            <div>
                {/* 通过ref属性获取dom元素，和vue相似 */}
                <input type="text" ref={this.myTextInput} />
                <span className="xxx" ref={this.testRef}></span>
                <input type="button" value="点击按钮使输入框得到焦点" onClick={this.click} />
            </div>
        );
    }
}
